<template>
	<scroll-view scroll-y @scrolltolower="handleAbnumDetail" class="scroll_view">
		<view class="album_content">
				<view class="album_head">
					<image :src="album.cover" mode="aspectFill"></image>
					<view class="album_headTitle">
						<view class="album_left">
							{{album.name}}
						</view>
						<view class="album_right">
							<view class="albumButton">
								关注专辑
							</view>
						</view>
					
					</view>
				</view>
				<view class="album_author">
					<view class="author_img">
						<image :src="album.user.avatar" mode="aspectFill"></image>
					</view>
					<text>
						{{album.user.name}}
					</text>
					<view class="author_desc">
						{{album.desc}}
					</view>
				</view>
				<view class="album_photoContent">
					<view class="album_photo" v-for="(item,index) in wallpaper" :key="item.id" @click="openPreview(item.preview)">
						  <go-detail :list="wallpaper" :index="index">
							  <image :src="item.img" mode="aspectFill"></image>
						  </go-detail>	
					</view>
				</view>
		
		</view>
	</scroll-view>
	
</template>

<script>
	import {goDetail} from '../commpoent/goDetail.vue'
	export default{
		components:{
			goDetail
		},
		data(){
			return{
				params:{
					limit:30,
					order:'new',
					skip:0,
					// 当值为0时,返回值就只剩wallpaper
					first:1
				},
				id:'-1',
				album:{},
				wallpaper:[],
				subject:[],
				preview:'',
				havemore:true
			}
		},
		onLoad(option){
			console.log(option)
			this.id = option.id
			this.getMsg()
		},
		methods:{
			getMsg(){
				this.request({
					url:'http://157.122.54.189:9088/image/v1/wallpaper/album/' + this.id + '/wallpaper',
					data:this.params
				})
				.then(res =>{
					if(res.data.res.wallpaper.length === 0){
						uni.showToast({
							title:'没有更多了',
							icon:'none'
						})
						this.havemore =  false
						return 
					}
					if(res.data.res.album){
						this.album = res.data.res.album
						this.subject = res.data.res.subject
					}
					this.wallpaper = [...this.wallpaper,...res.data.res.wallpaper]
				})
				
			},
			handleAbnumDetail(){
				if(this.havemore){
					this.params.first = 0
					this.params.skip = this.params.skip + 30
					this.getMsg()
				}else{
			
				}
		
			},
			openPreview(e){
				this.preview = e
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.album_content{
		.album_head{
			position: relative;
			image{
				width: 100%;
				height: 360rpx;
			}
			.album_headTitle{
				position: absolute;
				bottom: 25rpx;
				left: 0;
				display: flex;
				justify-content: space-between;
				color: #fff;
				font-weight: 500;
				padding: 0 10rpx;
				width: 100%;
				.album_left{
					font-size: 36rpx;
					flex: 5;
				}
				.album_right{
					flex: 3;
					text-align: right;
					padding-left: 230rpx;
					.albumButton{
						background-color:$color ;
						border-radius: 5rpx;
						width: 170rpx;
						height: 60rpx;
						font-size: 30rpx;
						text-align: center;
						line-height: 60rpx;
					}
				}
			}
		}
		.album_author{
			margin: 50rpx 0 0 20rpx;
			.author_img{
				display: inline-block;
				margin-right: 15rpx;
				image{
					width: 80rpx !important;
					height: 80rpx !important;
					border-radius: 50%;
					vertical-align: middle;
				}
				
			}
			text{
				font-weight: 600;
				color: #000;
				font-size: 30rpx;
			}
			.author_desc{
				margin: 5rpx 10rpx;
			}
		}
		.album_photoContent{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.album_photo{
				flex: 1;
				width: 33.33%;
				height: 320rpx;
				image{
					border: 5rpx solid #fff;
				}
			}
		}
	}
</style>
